<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title=""
    :footer="null"
    :width="1200"
    :height="680"
    :destroyOnClose="true"
    wrapClassName="stationPopup"
    @height-change="handleHeightChange"
  >
    <a-tabs v-model:activeKey="state.tabActive">
      <a-tab-pane key="1" tab="雨情监测">
        <Hydrograph :data="state.tableRowData" :step="state.step" v-if="state.tabActive ==='1'" />
      </a-tab-pane>
      <!-- <a-tab-pane key="2" tab="预警记录">
        <WarningRecords :data="state.tableRowData" v-if="state.tabActive ==='2'" />
      </a-tab-pane>
      <a-tab-pane key="3" tab="阈值情况">
        <ThresholdSituation :data="state.tableRowData" v-if="state.tabActive ==='3'" />
      </a-tab-pane> -->
      <a-tab-pane key="4" tab="测站信息">
        <StationInfo :data="state.tableRowData" v-if="state.tabActive ==='4'" />
      </a-tab-pane>
    </a-tabs>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, reactive, provide } from "vue";
  import { BasicModal, useModalInner } from "@gui-pkg/antdcomponents";
  import Hydrograph from "./hydrograph.vue";
  import WarningRecords from "./warningRecords.vue";
  import ThresholdSituation from "./thresholdSituation.vue";
  import StationInfo from "./stationInfo.vue";

  const modalHeightValue = ref(680);
  const stepValue = ref("h-1");
  const state = reactive({
    stationName: "",
    tabActive: "1",
    tableRowData: null,
    step: "",
  });

  const [register, { setModalProps }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false });
    state.tableRowData = data.record;
    state.tabActive = "1";
  });
  provide("StepValue", stepValue);

  // 弹窗高度变化，主要是监听是否点击了全屏
  const handleHeightChange = (height: string) => {
    modalHeightValue.value = height;
  };
  provide("ModalHeightChange", modalHeightValue);
</script>

<style lang="less" rel="stylesheet/less" scoped></style>
